<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>

<body>
    <button id="btn">节流按钮</button>
    <p>节流：无论用户触发事件多少次，附加的函数在给定的时间间隔内只会执行一次。
        （即：回调函数在规定时间内最多执行一次）</p>


    <script>

        /** 
      * @desc 函数节流
      * @param func 回调函数 
      * @param limit 时间限制
      */
        const throttle = (func, limit) => {
            let inThrottle;  // 是否处于节流限制时间内

            return function () {
                const context = this;
                const args = arguments;

                // 跳出时间限制
                if (!inThrottle) {
                    func.apply(context, args);  // 执行回调
                    inThrottle = true;
                    // 开启定时器计时
                    setTimeout(() => inThrottle = false, limit);
                }
            }
        }

        let btnEle = document.getElementById('btn')

        btnEle.addEventListener('click', throttle(function () {
            console.log('Hello world');
        }, 2000))








    </script>
</body>

</html>